<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../03_layout/CSS/reset.css">
   <style>
       *{
           margin: 0;
           padding: 0;
       }
       body{
           height: 3000px;
       }
       .nav{
           width: 1210px;
           height: 48px;
           background-color: #E8E7E3;
           margin: 100px auto;

           /* 
                粘滞定位
                    -当元素的position属性设置为sticky时则开启了元素的粘滞定位
                    - 粘滞定位和相对定位的特点基本一致
                        不同的是粘滞定位可以在元素到达某个位置时将其固定

                但兼容性不好
            */

            position: sticky;

            top: 50px;
           
       }
       ul li{
           width: 172.86px;
           height: 48px;
           line-height: 48px;
           background-color: #E8E7E3;
           float: left;
           text-align: center;

       }
       ul li a{
           display: block;
           /* 将a设置成块元素，继承li的宽高和浮动 */
           text-decoration: none;
           font-size: 15px;
           font-weight: bold;
           color: #777;
       }
       ul li:hover{
        width: 172px;
           height: 48px;
           line-height: 48px;
           background-color: #3F3F3F;
           float: left;
           text-align: center;
       }
       ul li a:hover{
           color: white
       }
   </style>
</head>
<body>
    <ul class="nav">
        <li>
            <a href="#">HTML/CSS</a>
        </li>
        <li>
            <a href="#">Browser Side</a>
        </li>
        <li>
            <a href="#">Server Side</a>
        </li>
        <li>
            <a href="#">Programming</a>
        </li>
        <li>
            <a href="#">XML</a>
        </li>
        <li>
            <a href="#">Web Building</a>
        </li>
        <li>
            <a href="#">Reference</a>
        </li>
    </ul>
</body>
</html>